<template>
  <div>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="id"
          label="序号"
          width="150">
      </el-table-column>
      <el-table-column
          prop="cropId"
          label="农作物id"
          width="120">
      </el-table-column>
      <el-table-column
          prop="cname"
          label="作物名称"
          width="120">
      </el-table-column>
      <el-table-column
          prop="num"
          label="数量"
          width="120">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="product(scope.row)" type="text" size="small">生产加工</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @current-change="gopage"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="total">
    </el-pagination>
    <el-dialog title="收货地址"  :visible.sync="dialogFormVisible" width="700px">
      <el-form :model="form" label-width="60" :rules="rules" ref="ruleForm">
        <el-row>
          <el-col span="12">
            <el-form-item label="品名" :label-width="formLabelWidth" prop="cname">
              <el-input v-model="form.cname" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="12">
            <el-form-item label="配料" :label-width="formLabelWidth" prop="dosing">
              <el-input v-model="form.dosing" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="12">
            <el-form-item label="负责人" :label-width="formLabelWidth" prop="name">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="12">
            <el-form-item label="联系方式" :label-width="formLabelWidth" prop="tel">
              <el-input v-model="form.tel" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="12">
            <el-form-item label="生产车间" :label-width="formLabelWidth" prop="workshop">
              <el-input v-model="form.workshop" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="12">
            <el-form-item label="生产时间" :label-width="formLabelWidth" prop="hours">
              <el-input v-model="form.hours" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="12">
            <el-form-item label="储藏方法" :label-width="formLabelWidth" prop="storageMethod">
              <el-input v-model="form.storageMethod" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="12">
            <el-form-item label="净含量" :label-width="formLabelWidth" prop="netContent">
              <el-input v-model="form.netContent" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="12">
            <el-form-item label="食用推荐" :label-width="formLabelWidth" prop="edibleRecommendation">
              <el-input v-model="form.edibleRecommendation" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="12">
            <el-form-item label="保存方法" :label-width="formLabelWidth" prop="method">
              <el-input v-model="form.method" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addProduct('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>

export default {
  name: "ProductView",
  data() {
    return {
      //2属性定义
      tableData:[],
      pageNum:1,
      total:0,
      dialogFormVisible:false,
      formLabelWidth:'120px',
      form:{},
      ruleForm: {
        name: '',
        dosing: '',
        tel: '',
        workshop: '',
        hours: '',
        netContent: '',
        edibleRecommendation: '',
        storageMethod: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入负责人', trigger: 'blur' },
        ],
        dosing: [
          { required: true, message: '请输入配料', trigger: 'blur' },
        ],
        tel: [
          { required: true, message: '请输入联系方式', trigger: 'blur' },
        ],
        workshop: [
          { required: true, message: '请输入生产车间', trigger: 'blur' },
        ],
        hours: [
          { required: true, message: '请输入生产时间', trigger: 'blur' },
        ],
        storageMethod: [
          { required: true, message: '请输入储藏方法', trigger: 'blur' },
        ],
        netContent: [
          { required: true, message: '请输入净含量', trigger: 'blur' },
        ],
        edibleRecommendation: [
          { required: true, message: '请输入食用推荐', trigger: 'blur' },
        ],
        method: [
          { required: true, message: '请输入保存方法', trigger: 'blur' },
        ],


      }
    }
  }, methods: {
    product(row){
      this.form.mcid=row.id;
      this.form.cname=row.cname;
      this.form.cropId=row.cropId
      this.form.marketId=row.marketId;
      this.form.num=row.num;
      this.dialogFormVisible=true;
    },
    addProduct(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios.post("productservice/product/addProduct",this.form).then(res=>{
            if(res.data.code==200){
              this.$message.success(res.data.msg);
              this.dialogFormVisible=false;
              this.getList();
            }else{
              this.$message.error(res.data.msg);
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //3自定义方法
    gopage(page){
      this.pageNum=page;
      this.getList();
    },
    getList(){
      this.axios.post("productservice/mc/list?pageNum="+this.pageNum).then(res=>{
        this.tableData=res.data.data.list;
        this.total=res.data.data.total;
      })
    }
  }, created() {
    //4.钩子函数
    this.getList();
  }
}
</script>

<style scoped>

</style>
